<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="团购详情" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>

        <!--幻灯片-->
        <view class="coreshop-full-screen-banner-swiper-box">
            <u-swiper height="calc(750rpx * 6 / 6)" radius="0" :list="goodsInfo.album" :autoplay="autoplay" indicator indicatorMode="line" circular @click="clickImg"></u-swiper>
        </view>

        <view class="coreshop-margin-left-8 coreshop-margin-right-8 coreshop-margin-top-12 coreshop-border-radius-9" v-if="goodsInfo.groupPromotionResult">
            <u-alert title="当前团购活动规则：" type="warning" effect="dark" closable="true" :description="goodsInfo.groupPromotionResult"></u-alert>
        </view>

        <view class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
            <view class="coreshop-flex coreshop-justify-between coreshop-align-center">
                <view class="coreshop-text-red coreshop-font-weight-bold">
                    <text class="coreshop-font-16">¥</text>
                    <text class="coreshop-font-24">{{ product.price || '0.00' }}</text>
                    <text class="coreshop-font-12 coreshop-text-gray coreshop-text-through coreshop-margin-left-8">¥{{ product.mktprice }}</text>
                </view>
                <view class="coreshop-flex coreshop-text-left coreshop-justify-center coreshop-align-center">
                    <view class="coreshop-text-right coreshop-time-right">
                        <u-count-down :time="goodsInfo.groupTimestamp*1000" :autoStart="true" :millisecond="true" format="DD天HH时mm分ss秒" @change="onChange">
                            <view class="time">
                                <view class="coreshop-font-12">仅剩：</view>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.days }}</text>
                                </view>
                                <text class="time__doc">天</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.minutes }}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.seconds }}</text>
                                </view>
                            </view>
                        </u-count-down>
                    </view>
                </view>
            </view>
            <view class="coreshop-margin-top-12 coreshop-multiple-line-clamp">
                <text class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{ goodsInfo.name || '' }}</text>
            </view>
            <view class="coreshop-margin-top-8 coreshop-multiple-line-clamp">
                <text class="coreshop-font-14 coreshop-text-gray">{{ goodsInfo.brief || '' }}</text>
            </view>
            <view class="coreshop-flex coreshop-margin-top-8" v-if="goodsInfo.brand || goodsInfo.labels">
                <u-tag :text="goodsInfo.brand.name" v-if="goodsInfo.brand"></u-tag>
                <view class="coreshop-margin-left-6" v-for="item in goodsInfo.labels" :key="item.id">
                    <u-tag :text="item.name" :bgColor="item.style" :borderColor="item.style"></u-tag>
                </view>
            </view>
            <view class="coreshop-margin-top-8 coreshop-padding-top-16 coreshop-solid-top coreshop-flex coreshop-justify-between coreshop-align-center coreshop-text-gray">
                <view class="coreshop-font-12">
                    <text>已售：</text>
                    <text class="font-color-orange">{{ goodsInfo.buyCount || '0' }}</text>
                </view>
                <view class="coreshop-font-12">
                    <u-icon name="share-fill" size="18" label="分享" :labelSize="12" labelPos="right" @click="goShare"></u-icon>
                </view>
                <view class="coreshop-font-12">
                    <u-icon name="star-fill" :size="18" label="收藏" :labelSize="12" labelPos="right" @click="collection" v-if="isfav"></u-icon>
                    <u-icon name="star" :size="18" label="收藏" :labelSize="12" labelPos="right" @click="collection" v-else></u-icon>
                </view>
            </view>
        </view>

        <view class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
            <!--服务-->
            <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row" @tap="serviceTap" v-if="serviceDescription.service.length>0">
                <view class="coreshop-basis-2">
                    <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">服务</text>
                </view>
                <view class="coreshop-basis-7 coreshop-flex coreshop-align-center">
                    <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-align-center">
                        <u-icon name="checkmark-circle" size="12" labelSize="12" color="#e54d42" :label="item.title" v-for="(item, index) in serviceDescription.service" :key="index" class="coreshop-margin-right-10"></u-icon>
                    </view>
                </view>
                <view class="coreshop-basis-1">
                    <view class="coreshop-float-right">
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>
            <!--发货-->
            <view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" v-if="serviceDescription.delivery.length>0" />
            <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-padding-top-10" v-if="serviceDescription.delivery.length>0">
                <view class="coreshop-basis-2">
                    <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">发货</text>
                </view>
                <view class="coreshop-coreshop-basis-8 coreshop-flex coreshop-align-center">
                    <text class="coreshop-font-sm" v-for="(item, index) in serviceDescription.delivery" :key="index">{{item.description}}</text>
                </view>
            </view>
            <!--规格-->
            <view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
            <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10" @tap="openSkuPopup">
                <view class="coreshop-basis-2">
                    <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">规格</text>
                </view>
                <view class="coreshop-basis-7 coreshop-flex coreshop-align-center">
                    <text class="coreshop-font-sm">{{ product.spesDesc || ''}}</text>
                </view>
                <view class="coreshop-basis-1">
                    <view class="coreshop-float-right">
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>
        </view>

        <!--评论-->
        <view class="coreshop-margin-top-10 coreshop-bg-white  coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-bottom-10" v-if="goodsComments.length">
            <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10 coreshop-flex-direction-row">
                <view class="coreshop-basis-2">
                    <text class="coreshop-text-black coreshop-font-md">评价（{{commentsCount}}）</text>
                </view>
                <view class="coreshop-basis-7"></view>
                <view class="coreshop-basis-1">
                    <view class="coreshop-float-right">
                        <u-icon name="arrow-right" @tap="goGoodComments(goodsInfo.id)"></u-icon>
                    </view>
                </view>
            </view>
            <view v-for="(item, index) in goodsComments" :key="index">
                <view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
                <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-10 coreshop-flex-direction-row">
                    <view class="coreshop-basis-1">
                        <view class="coreshop-avatar sm round" :style="[{backgroundImage:'url('+ item.avatarImage +')'}]" />
                    </view>
                    <view class="coreshop-basis-9 coreshop-font-sm">
                        <view>{{ (item.nickName && item.nickName != '')?item.nickName:item.mobile }}</view>
                        <view class="coreshop-margin-top-10">{{ item.contentBody || ''}}</view>
                        <view class="coreshop-text-gray coreshop-margin-top-5">
                            <u-rate v-model="item.score" :count="5" size="13"></u-rate>
                        </view>
                        <view class="coreshop-margin-top-10" v-if="item.imagesArr">
                            <u-album :urls="item.imagesArr" rowCount="4"></u-album>
                        </view>
                        <view class="coreshop-text-gray coreshop-margin-top-5 coreshop-font-12">{{ item.createTime || ''}} {{ item.addon || ''}}</view>
                        <view class="coreshop-bg-gray coreshop-padding-10 coreshop-border-radius-tr-16 coreshop-margin-top-10" v-if="item.sellerContent">
                            商家回复：{{item.sellerContent}}
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!--参数-->
        <view class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white" v-if="goodsParams.length>0">
            <view>
                <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">参数</text>
            </view>
            <view class="goods-param-box">
                <view class="goods-param-line" v-for="(item, index) in goodsParams" :key="index">
                    <view class="name">
                        <text>{{item.name}}</text>
                    </view>
                    <view class="value">
                        <text>{{item.value}}</text>
                    </view>
                </view>
            </view>
        </view>

        <!--内容区-->
        <view class="coreshop-margin-top-8 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
            <view class="line-70"></view>
            <view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">详情介绍</view>
            <view class="line-70"></view>
        </view>
        <view class="coreshop-margin-top-10 coreshop-bg-white">
            <u-parse :content="goodsInfo.intro" :selectable="true" v-if="goodsInfo.intro"></u-parse>
            <!-- 无数据时默认显示 -->
            <view class="coreshop-emptybox coreshop-padding-10" v-else>
                <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="详情为空" mode="list"></u-empty>
            </view>
        </view>

        <!-- 分享弹窗 -->
        <view class="coreshop-padding-0">
            <u-popup mode="bottom" :show="shareBox" ref="share">
                <!-- #ifdef MP-WEIXIN -->
                <coreshop-share-wx :shareType='$globalConstVars.shareType.group' :groupId="groupId" :goodsId="goodsInfo.id" :shareImg="goodsInfo.image" :shareTitle="goodsInfo.name" :shareContent="goodsInfo.brief" :shareHref="shareHref" @close="closeShare()"></coreshop-share-wx>
                <!-- #endif -->
                <!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
                <coreshop-share-app :shareType='$globalConstVars.shareType.group' :groupId="groupId" :goodsId="goodsInfo.id" :shareImg="goodsInfo.image" :shareTitle="goodsInfo.name" :shareContent="goodsInfo.brief" :shareHref="shareHref" @close="closeShare()"></coreshop-share-app>
                <!-- #endif -->
            </u-popup>
            <div id="qrCode" ref="qrCodeDiv"></div>
        </view>

        <!--常见问题-->
        <view class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
            <view class="coreshop-margin-bottom-16">
                <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">常见问题</text>
            </view>
            <view class="coreshop-flex coreshop-flex-wrap coreshop-margin-bottom-10 coreshop-flex-direction-row" v-for="(item, index) in serviceDescription.commonQuestion" :key="index">
                <view class="coreshop-basis-2 coreshop-font-13">
                    {{item.title}}
                </view>
                <view class="coreshop-basis-8">
                    <view class="coreshop-font-12">{{item.description}}</view>
                </view>
            </view>
            <view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
            <view class="coreshop-text-center coreshop-text-blue  coreshop-padding-top-10 coreshop-font-13" @tap="goArticleList()">查看更多问题</view>
        </view>


        <!--为您推荐-->
        <view class="coreshop-margin-top-8 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
            <view class="line-70"></view>
            <view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
            <view class="line-70"></view>
        </view>

        <view class="waterfall " v-if="shopRecommendData.length > 0">
            <uv-waterfall ref="waterfall"
                          v-model="shopRecommendData"
                          :add-time="10"
                          :left-gap="leftGap"
                          :right-gap="rightGap"
                          :column-gap="columnGap"
                          @changeList="changeList">
                <!-- 第一列数据 -->
                <template v-slot:list1>
                    <!-- 为了磨平部分平台的BUG，必须套一层view -->
                    <view>
                        <view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
                            <view class="coreshop-margin-bottom-10">
                                <view class="waterfall-item__image" :style="[imageStyle(item)]">
                                    <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
                                </view>
                                <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
                                    <view class="coreshop-title-294 coreshop-multiple-line-clamp">
                                        <text class="coreshop-font-14">{{item.name}}</text>
                                    </view>
                                    <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
                                        <view class="coreshop-text-red coreshop-font-weight-bold">
                                            <text class="coreshop-font-12">¥</text>
                                            <text class="coreshop-font-16">{{item.price}}</text>
                                            <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
                                        </view>
                                        <view>
                                            <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                        <view>
                                            {{ pointShowName}}兑换价:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                                        <view>
                                            购买赠送:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{item.points}}{{ pointShowName}}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
                <!-- 第二列数据 -->
                <template v-slot:list2>
                    <!-- 为了磨平部分平台的BUG，必须套一层view -->
                    <view>
                        <view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
                            <view class="coreshop-margin-bottom-10">
                                <view class="waterfall-item__image" :style="[imageStyle(item)]">
                                    <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
                                </view>
                                <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
                                    <view class="coreshop-title-294 coreshop-multiple-line-clamp">
                                        <text class="coreshop-font-14">{{item.name}}</text>
                                    </view>
                                    <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
                                        <view class="coreshop-text-red coreshop-font-weight-bold">
                                            <text class="coreshop-font-12">¥</text>
                                            <text class="coreshop-font-16">{{item.price}}</text>
                                            <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
                                        </view>
                                        <view>
                                            <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                        <view>
                                            {{ pointShowName}}兑换价:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                                        <view>
                                            购买赠送:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{item.points}}{{ pointShowName}}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
            </uv-waterfall>
        </view>

        <u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" height="70%" @close="hideModal" :closeable="true">
            <view class="radius coreshop-bg-white">
                <!--标题-->
                <view class="coreshop-text-black coreshop-text-center coreshop-margin-top-15 coreshop-margin-bottom-15 coreshop-font-lg coreshop-title-bar">
                    <text>{{modalTitle}}</text>
                </view>
                <!--内容区域-->
                <view class="coreshop-modal-content">
                    <!--服务区域-->
                    <view class="coreshop-common-view-box service" v-if="modalType=='service'">
                        <view v-for="(item, index) in serviceDescription.service" :key="index">
                            <view class="coreshop-font-md coreshop-padding-bottom-10 coreshop-padding-top-10 coreshop-flex-direction-row">
                                <u-icon name="checkmark-circle" color="#e54d42" :label="item.title" labelSize="15px" label-pos="right"></u-icon>
                            </view>
                            <view class="coreshop-font-sm coreshop-text-gray coreshop-padding-bottom-5 coreshop-padding-top-5">
                                {{item.description}}
                            </view>
                        </view>
                    </view>
                    <!--促销区域-->
                    <view class="coreshop-common-view-box promotion" v-if="modalType=='promotion'">
                        <view class="text-view" v-for="(item, index) in promotion" :key="index">
                            <text class="cu-tag line-orange radius sm">{{item.name}}</text>
                            <text class="coreshop-margin-left-10 u-line-5 coreshop-text-black">{{item.name}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>

        <!--占位底部距离-->
        <view class="coreshop-tabbar-height" />

        <!--底部操作-->
        <view class="coreshop-good-footer-fixed">
            <view class="tabbar">
                <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-basis-4">
                    <!-- 客服按钮 -->
                    <!-- #ifdef APP-PLUS-NVUE || APP-PLUS -->
                    <view class="action" @click="showChat()">
                        <button class="noButtonStyle">
                            <u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom"></u-icon>
                        </button>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <view class="action">
                        <button open-type="contact" bindcontact="showChat" class="noButtonStyle" :send-message-title="goodsInfo.name" :send-message-path="'/pages/goods/goodDetails/goodDetails?id='+goodsInfo.id" :send-message-img="goodsInfo.image" show-message-card="true">
                            <u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom"></u-icon>
                        </button>
                    </view>
                    <!-- #endif -->
                    <view class="action" @click="redirectCart">
                        <button class="noButtonStyle">
                            <u-badge type="warning" :value="cartNums" showZero="false" absolute="true" :offset="[1, 4]"></u-badge>
                            <u-icon name="shopping-cart-fill" :size="24" label="购物车" :labelSize="12" space="1px" labelPos="bottom"></u-icon>
                        </button>
                    </view>
                </view>
                <view class="btn-group coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-basis-5">
                    <u-button type="error" size="normal" @click="openSkuPopup" shape="circle" color="#f37b1d">立即团购</u-button>
                </view>
            </view>
        </view>

        <vk-data-goods-sku-popup ref="skuPopup"
                                 v-model="skuKey"
                                 border-radius="20"
                                 :amount-type="0"
                                 :localdata="goodsSkuInfo"
                                 mode="3"
                                 @add-cart="addCart"
                                 @buy-now="buyNow"
                                 buy-now-text="立即团购"></vk-data-goods-sku-popup>

        <!-- 右边浮动球 -->
        <coreshop-fab horizontal="right" vertical="bottom" direction="vertical"></coreshop-fab>
        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>
<script>
    import { mapMutations, mapActions, mapState } from 'vuex';

    export default {

        data() {
            return {
                // 是否打开SKU弹窗
                skuKey: false,
                // 后端返回的商品信息
                goodsSkuInfo: {},
                goodsId: 0, // 商品id
                groupId: 0, // 团购ID
                goodsInfo: {}, // 商品详情
                cartNums: 0, // 购物车数量
                product: {}, // 规格详情
                goodsParams: [], // 商品参数信息
                goodsComments: [], // 商品评论信息
                commentsCount: 0, // 商品评论信息
                shopRecommendData: [], // 本店推荐数据
                type: 2,
                cartType: this.$globalConstVars.paymentType.group,
                isfav: false, // 商品是否收藏
                //拼团列表滑动数据
                swiperSet: {
                    indicatorDots: false,
                    autoplay: false,
                    interval: 2000,
                    duration: 500,
                    groupHeight: '',
                },
                bottomModal: false,
                modalTitle: '',
                modalType: 'promotion',
                selectType: '',
                shareUrl: this.$globalConstVars.shareUrl,
                shareBox: false,
                serviceDescription: {
                    commonQuestion: [],
                    delivery: [],
                    service: [],
                },
                timeData: {},
                list1: [],// 瀑布流第一列数据
                list2: [],// 瀑布流第二列数据
                leftGap: 10,
                rightGap: 10,
                columnGap: 10
            };
        },
        onLoad(e) {
            this.groupId = e.id;
            if (this.groupId) {
                this.getServiceDescription();
                this.getGoodsInfo();
                this.getGoodsParams();
                this.getGoodsComments();
            } else {
                this.$refs.uToast.show({
                    message: '获取失败', type: 'error', complete: function () {
                        uni.navigateBack({
                            delta: 1
                        });
                    }
                });
            }
            // 获取购物车数量
            this.getCartNums();
            //获取推荐数据
            this.getGoodsRecommendList();
        },
        computed: {
            ...mapState({
                hasLogin: state => state.hasLogin,
                userInfo: state => state.userInfo,
            }),
            hasLogin: {
                get() {
                    return this.$store.state.hasLogin;
                },
                set(val) {
                    this.$store.commit('hasLogin', val);
                }
            },
            userInfo: {
                get() {
                    return this.$store.state.userInfo;
                },
                set(val) {
                    this.$store.commit('userInfo', val);
                }
            },
            pointSwitch() { return this.$store.state.config.pointSwitch },
            pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
            pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
            pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
            pointShowName() { return this.$store.state.config.pointShowName },
            pointGetModel() { return this.$store.state.config.pointGetModel },
            pointShowPoint() { return this.$store.state.config.pointShowPoint },
            shopName() {
                return this.$store.state.config.shopName;
            },
            shareTitle() {
                return this.$store.state.config.shareTitle;
            },
            shopLogo() {
                return this.$store.state.config.shopLogo;
            },
            // 获取店铺联系人手机号
            shopMobile() {
                return this.$store.state.config.shopMobile || 0;
            },
            // 优惠信息重新组装
            promotion() {
                let arr = [];
                if (this.product.promotionList) {
                    for (let k in this.product.promotionList) {
                        arr.push(this.product.promotionList[k]);
                    }
                }
                return arr;
            },
            shareHref() {
                let pages = getCurrentPages();
                let page = pages[pages.length - 1];
                // #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
                return this.$globalConstVars.apiBaseUrl + 'wap/' + page.route + '?id=' + this.goodsId + '&groupId=' + this.groupId;
                // #endif
            },
            imageStyle(item) {
                return item => {
                    const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
                    const w = v / 2;
                    const rate = w / item.w;
                    const h = rate * item.h;
                    return {
                        width: w + 'px',
                        height: h + 'px'
                    }
                }
            }
        },
        methods: {
            // 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
            changeList(e) {
                this[e.name].push(e.value);
            },
            onChange(e) {
                this.timeData = e
            },
            // 打开sku弹出
            openSkuPopup() {
                this.skuKey = true;
            },
            closeSkuPopup() {
                this.skuKey = false;
            },
            // 立即购买
            buyNow(selectShop) {
                var that = this;
                uni.showLoading({
                    title: '加载中'
                });
                if (!this.hasLogin) {
                    uni.hideLoading();
                    this.$store.commit('showLoginTip', true);
                    return false;
                }
                if (selectShop.buy_num > 0) {
                    let data = {
                        ProductId: selectShop._id,
                        Nums: selectShop.buy_num,
                        type: this.type,
                        cartType: this.cartType,
                        objectId: this.groupId
                    };
                    this.$u.api.addCart(data).then(res => {
                        if (res.status) {
                            let cartIds = res.data;
                            this.$u.route('/pages/placeOrder/index/index?cartIds=' + JSON.stringify(cartIds) + '&orderType=' + this.cartType + '&objectId=' + this.groupId);
                            uni.hideLoading();
                        } else {
                            this.$u.toast(res.msg);
                            uni.hideLoading();
                        }
                    });
                }
                that.closeSkuPopup();
            },
            getServiceDescription() {
                let _this = this;
                this.$u.api.getServiceDescription().then(res => {
                    console.log(res);
                    if (res.status == true) {
                        _this.serviceDescription.commonQuestion = res.data.commonQuestion;
                        _this.serviceDescription.delivery = res.data.delivery;
                        _this.serviceDescription.service = res.data.service;

                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                })
            },
            getGoodsInfo() {
                let data = {
                    id: this.groupId,
                    type: this.cartType,
                    needSku: true,
                };
                // 如果用户已经登录 要传用户token
                let userToken = this.$db.get('userToken');
                if (userToken) {
                    data.token = userToken;
                }
                let _this = this;
                this.$u.api.groupInfo(data).then(res => {
                    if (res.status) {
                        if (res.data.length < 1) {
                            _this.$refs.uToast.show({
                                message: '该商品不存在，请返回重新选择商品。', type: 'error', complete: function () {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                }
                            });
                        } else if (res.data.isMarketable == false) {
                            _this.$refs.uToast.show({
                                message: '该商品已下架，请返回重新选择商品。', type: 'error', complete: function () {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                }
                            });
                        } else {
                            let info = res.data;
                            _this.product = res.data.product;
                            _this.goodsInfo = info;
                            _this.goodsId = info.id;
                            this.goodsSkuInfo = res.data.skuList;

                            if (_this.goodsInfo.album) {
                                var albums = [];
                                for (var i = 0; i < _this.goodsInfo.album.length; i++) {
                                    let album = {
                                        url: _this.goodsInfo.album[i],
                                        type: 'image'
                                    }
                                    albums.push(album);
                                }
                                _this.goodsInfo.album = albums;
                                if (_this.goodsInfo.video) {
                                    let videoObj = {
                                        url: _this.goodsInfo.video,
                                        poster: _this.goodsInfo.image,
                                        type: 'video'
                                    }
                                    _this.goodsInfo.album.unshift(videoObj);
                                    _this.autoplay = false;
                                }
                            }

                            _this.isfav = _this.goodsInfo.isfav;
                            _this.type = _this.goodsInfo.groupType;

                            // 判断如果登录用户添加商品浏览足迹
                            if (userToken) {
                                _this.goodsBrowsing();
                            }
                        }
                    }
                });
            },
            // 获取推荐商品信息
            getGoodsRecommendList() {
                let _this = this;
                let recommenddata = {
                    id: 10,
                    data: true
                }
                _this.$u.api.getGoodsRecommendList(recommenddata).then(res => {
                    if (res.status) {
                        _this.shopRecommendData = _this.$u.randomArray(res.data);
                    } else {
                        _this.$u.toast(res.msg)
                    }
                });
            },
            // 获取购物车数量
            getCartNums() {
                let userToken = this.$db.get('userToken');
                if (userToken && userToken != '') {
                    // 获取购物车数量
                    this.$u.api.getCartNum().then(res => {
                        if (res.status) {
                            this.cartNums = res.data;
                        }
                    });
                }
            },
            // 商品收藏/取消
            collection() {
                let data = {
                    id: this.goodsInfo.id
                };
                this.$u.api.goodsCollection(data).then(res => {
                    if (res.status) {
                        this.isfav = !this.isfav;
                        this.$refs.uToast.show({ message: res.msg, type: 'success', back: false });
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            // 获取商品参数信息
            getGoodsParams() {
                this.$u.api.goodsParams(
                    {
                        id: this.goodsId
                    }).then(res => {
                        if (res.status == true) {
                            this.goodsParams = res.data;
                        }
                    }
                    );
            },
            // 获取商品评论信息
            getGoodsComments() {
                let data = {
                    page: 1,
                    limit: 5,
                    id: this.goodsId,
                }
                this.$u.api.goodsComment(data).then(res => {
                    if (res.status == true) {
                        let _list = res.data.list;
                        this.commentsCount = res.data.commentsCount;
                        // 如果评论没有图片 在这块作处理否则控制台报错
                        _list.forEach(item => {
                            if (!item.hasOwnProperty('images')) {
                                this.$set(item, 'images', [])
                            }
                        });
                        this.goodsComments = [...this.goodsComments, ..._list];
                    } else {
                        this.$u.toast(res.msg);
                    }
                })
            },
            // 添加商品浏览足迹
            goodsBrowsing() {
                let data = {
                    id: this.goodsInfo.id
                };
                this.$u.api.addGoodsBrowsing(data).then(res => { });
            },
            // 点击弹出框确定按钮事件处理
            clickHandle() {
                if (!this.hasLogin) {
                    this.$store.commit('showLoginTip', true);
                    return false;
                }
                this.submitStatus = true;
                this.buyNow();
            },
            goShare() {
                this.shareBox = true;
            },
            closeShare() {
                this.shareBox = false;
            },
            // 图片点击放大
            clickImg(index) {
                if (this.goodsInfo.album[index].type == 'image') {
                    uni.previewImage({
                        urls: [this.goodsInfo.album[index].url],
                    });
                }
            },
            //在线客服
            showChat() {
                // #ifdef APP-PLUS || APP-PLUS-NVUE
                this.$u.route('/pages/member/customerService/index');
                // #endif
            },
            //获取分享URL
            getShareUrl() {
                let data = {
                    client: this.$globalConstVars.shareClient.wxMiNiProgram,
                    url: this.$globalConstVars.shareUrl,
                    type: this.$globalConstVars.shareModel.url,
                    page: this.$globalConstVars.shareType.group,
                    params: {
                        groupId: this.groupId
                    }
                };
                let userToken = this.$db.get('userToken');
                if (userToken && userToken != '') {
                    data.token = userToken
                }
                this.$u.api.share(data).then(res => {
                    this.shareUrl = res.data
                });
            },
            serviceTap() {
                this.modalTitle = "说明";
                this.modalType = 'service';
                this.showModal();
            },
            promotionTap() {
                this.modalTitle = "促销优惠";
                this.modalType = 'promotion';
                this.showModal();
            },
            showModal() {
                this.bottomModal = true;
            },
            hideModal(e) {
                this.bottomModal = false;
                this.modalTitle = "";
                this.modalType = '';
            },
        },
        watch: {
            goodsId: {
                handler() {
                    this.getShareUrl();
                },
                deep: true
            }
        },
        //分享
        onShareAppMessage(res) {
            return {
                title: this.goodsInfo.name,
                imageUrl: this.goodsInfo.image,
                path: this.shareUrl
            }
        },
        onShareTimeline(res) {
            return {
                title: this.goodsInfo.name,
                imageUrl: this.goodsInfo.image,
                path: this.shareUrl
            }
        },
    };
</script>
<style lang="scss">
    image { display: block; }
</style>
